{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% set utm_params = 'utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=nav&utm_content=products' %}

<li class="c-menu-category mzp-has-drop-down mzp-js-expandable">
  <a class="c-menu-title" href="{{ url('products.landing') }}" aria-haspopup="true" aria-controls="c-menu-panel-products" data-testid="navigation-link-products">{{ ftl('navigation-v2-products') }}</a>
  <div class="c-menu-panel" id="c-menu-panel-products" data-testid="navigation-menu-products">
    <div class="c-menu-panel-container">
      <button class="c-menu-button-close" type="button" aria-controls="c-menu-panel-products">{{ ftl('navigation-v2-close-products-menu') }}</button>
      <div class="c-menu-panel-content">
        <ul class="mzp-l-rows-four">
          <li>
            <section class="c-menu-item mzp-has-icon">
              <a class="c-menu-item-link" href="https://monitor.mozilla.org/?{{ utm_params }}" data-link-text="Mozilla Monitor" data-link-position="topnav - products">
                <img loading="lazy" src="{{ static('protocol/img/logos/firefox/monitor/logo.svg') }}" class="c-menu-item-icon" width="32" height="32" alt="">
                <h4 class="c-menu-item-title">{{ ftl('navigation-v2-mozilla-monitor') }}</h4>
                <p class="c-menu-item-desc">{{ ftl('navigation-v2-see-if-your-email-has') }}</p>
              </a>
            </section>
          </li>
          <li>
            <section class="c-menu-item mzp-has-icon">
              <a class="c-menu-item-link" href="{{ url('firefox.facebookcontainer.index') }}" data-link-text="Facebook Container" data-link-position="topnav - products">
                <svg class="c-menu-item-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="#f80073" d="M27 1H5C2.8 1 1 2.8 1 5v22c0 2.2 1.8 4 4 4h22c2.2 0 4-1.8 4-4V5c0-2.2-1.8-4-4-4z"></path><path fill="#fff" d="M26 8.8l-1.4-1.4c-.1-.1-.2-.1-.3 0l-1.4 1.4-.1.1v2.8h-2.3V8.9L19 7.4c-.1-.1-.2-.1-.3 0l-1.4 1.4-.1.1v2.8h-2.3V8.9l-1.4-1.4c-.1-.1-.2-.1-.3 0l-1.4 1.4-.1.1v2.8H9.2V8.9L7.8 7.4c-.1-.1-.2-.1-.3 0L6 8.8l-.1.1v15c0 .1.1.2.2.2H9c.1 0 .2-.1.2-.2v-2.8h2.3V24c0 .1.1.2.2.2h2.8c.1 0 .2-.1.2-.2v-2.8H17V24c0 .1.1.2.2.2H20c.1 0 .2-.1.2-.2v-2.8h2.3V24c0 .1.1.2.2.2h2.8c.1 0 .2-.1.2-.2V9c.4-.1.3-.2.3-.2zm-14.7 11H9.2v-6.6h2.3v6.6h-.2zm5.6 0h-2.1v-6.6h2.3v6.6h-.2zm5.7 0h-2.1v-6.6h2.3v6.6h-.2z"></path></svg>
                <h4 class="c-menu-item-title">{{ ftl('navigation-v2-facebook-container') }}</h4>
                <p class="c-menu-item-desc">{{ ftl('navigation-v2-help-prevent-facebook-from') }}</p>
              </a>
            </section>
          </li>
          <li>
            <section class="c-menu-item mzp-has-icon">
              <a class="c-menu-item-link" href="{{ url('products.vpn.landing') }}" data-link-text="Mozilla VPN" data-link-position="topnav - products">
                <img loading="lazy" src="{{ static('protocol/img/logos/mozilla/vpn/logo.svg') }}" class="c-menu-item-icon" width="32" height="32" alt="">
                <h4 class="c-menu-item-title">{{ ftl('navigation-v2-mozilla-vpn') }}</h4>
                <p class="c-menu-item-desc">{{ ftl('navigation-v2-get-protection-beyond-your-browser') }}</p>
              </a>
            </section>
          </li>
          <li>
            <section class="c-menu-item mzp-has-icon">
              <a class="c-menu-item-link" href="https://relay.firefox.com/?{{ utm_params }}" data-link-text="Firefox Relay" data-link-position="topnav - projects">
                <img loading="lazy" src="{{ static('protocol/img/logos/firefox/relay/logo.svg') }}" class="c-menu-item-icon" width="32" height="32" alt="">
                <h4 class="c-menu-item-title">{{ ftl('navigation-v2-firefox-relay', fallback='navigation-v2-firefox-relay-beta') }}</h4>
                <p class="c-menu-item-desc">{{ ftl('navigation-v2-sign-up-for-new-accounts') }}</p>
              </a>
            </section>
          </li>
          <li>
            <section class="c-menu-item mzp-has-icon">
              <a class="c-menu-item-link" href="https://developer.mozilla.org/plus?{{ utm_params }}" data-link-text="MDN Plus" data-link-position="topnav - projects">
                <img loading="lazy" src="{{ static('img/logos/mdn/mdn-plus-logo.svg') }}" class="c-menu-item-icon" width="32" height="32" alt="">
                <h4 class="c-menu-item-title">{{ ftl('navigation-v2-mdn-plus') }}</h4>
                <p class="c-menu-item-desc">{{ ftl('navigation-v2-new-features-and-tools') }}</p>
              </a>
            </section>
          </li>
        </ul>
        <p class="c-menu-category-link"><a href="{{ url('products.landing') }}" data-link-text="View all Products" data-link-position="topnav - products">{{ ftl('navigation-v2-view-all-products') }}</a></p>
      </div>
    </div><!-- close .c-menu-panel-container -->
  </div><!-- close .c-menu-panel -->
</li><!-- close products -->
